<template>
  <div class="app-container">
    <el-tabs v-model="currentView" type="border-card" @tab-click="handleClick">
      <el-tab-pane v-if="checkPerm(['playRecord_view'])" :label="$t('terminal.devicePlaybackStatistics')" name="PlayRecord">
        <div :is="currentView" v-if="isPlayRecord" keep-alive />
      </el-tab-pane>
      <el-tab-pane v-if="checkPerm(['deviceStat_view'])" :label="$t('terminal.equipmentOnlineStatusStatistics')" name="DeviceStat">
        <div :is="currentView" v-if="isDeviceStat" keep-alive />
      </el-tab-pane>
      <el-tab-pane v-if="checkPerm(['downloadStat_view'])" :label="$t('terminal.programDistributionStatistics')" name="DownloadStat">
        <div :is="currentView" v-if="isDownloadStat" keep-alive />
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
import { checkPerm } from '@/utils/permission' // 权限判断函数
export default {
  components: {
    // 以下方式引入路由是路由的懒加载，有利于页面优化
    PlayRecord: resolve => {
      require(['./playRecord.vue'], resolve)
    },
    DeviceStat: resolve => {
      require(['./deviceStat.vue'], resolve)
    },
    DownloadStat: resolve => {
      require(['./downloadStat.vue'], resolve)
    }
  },
  data() {
    return {
      currentView: 'PlayRecord', // 当前组件
      isPlayRecord: true,
      isDeviceStat: false,
      isDownloadStat: false
    }
  },
  methods: {
    checkPerm,
    handleClick(tab) {
      if (tab.name === 'PlayRecord') {
        this.isPlayRecord = true
        this.isDeviceStat = false
        this.isDownloadStat = false
      } else if (tab.name === 'DeviceStat') {
        this.isPlayRecord = false
        this.isDeviceStat = true
        this.isDownloadStat = false
      } else if (tab.name === 'DownloadStat') {
        this.isPlayRecord = false
        this.isDeviceStat = false
        this.isDownloadStat = true
      }
    }
  }
}
</script>
<style scoped>
  /deep/ .el-tabs--border-card>.el-tabs__content {
    padding: 0px;
  }
</style>
